<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>每日签到</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
	<script src="statics/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

	<!--签到-->
	<div id="aui-footer">
		<div class="sign-in">
			<div class="sign-info">
				<div class="score">
					<span v-for="(vo,index) in sign_list.config" :class="(index==3 || index==6)?'text-yellow':''">+{{vo.value}}</span>
				</div>

				<div class="num sign2">
					<span :class="sign_list.days>1?'active now':(sign_list.days==1?'active now':'')">1</span>
					<span :class="sign_list.days>2?'active now':(sign_list.days==2?'active now':'')">2</span>
					<span :class="sign_list.days>3?'active now':(sign_list.days==3?'active now':'')">3</span>
					<span :class="sign_list.days>4?'active now':(sign_list.days==4?'active now':'')">4</span>
					<span :class="sign_list.days>5?'active now':(sign_list.days==5?'active now':'')">5</span>
					<span :class="sign_list.days>6?'active now':(sign_list.days==6?'active now':'')">6</span>
					<span :class="sign_list.days>7?'active now':(sign_list.days==7?'active now':'')">7</span>
				</div>
				<div class="date">
					<span>第1天</span>
					<span>第2天</span>
					<span>第3天</span>
					<span>第4天</span>
					<span>第5天</span>
					<span>第6天</span>
					<span>第7天</span>
				</div>
			</div>
			<div class="sign-btn">
				<a href="javascript:;" class="btn bg-blue" id="sign" @click="sign">签&nbsp;到</a>
			</div>
		</div>
		<!--说明-->
		<div class="explain">
			<div class="title"><span>签到说明</span></div>
		</div>
		<div class="explain-desc">
			<ul>
				<li>用户每天签到都能获得金币</li>
			</ul>
		</div>
		<!--昨日星-->
		<div class="star" v-for="vo in sign_list.monthSign">
			<div class="head">
				<!-- <img src="statics/images/head.png" alt="" /> -->
				<span>{{vo.stime}}</span>
			</div>
			<div>
				<span class="tip">获得</span>
				<span class="text-blue">+{{vo.score}}</span>
			</div>
		</div>
		<!--弹窗-->
		<div class="dialog" :style="dialog_show==true?'display:block':''">
			<div class="mask"></div>
			<div class="dialog-box">
				<div class="content">
					<p>已连续签到<span class="text-blue">{{check_sign.days}}</span>天</p>
					<p class="gold"><img src="statics/images/gold.png" /><span class="text-blue">+{{check_sign.score}}</span></p>
					<a href="javascript:;" class="btn bg-blue">明天签到继续领取金币</a>
				</div>
			</div>
			<div class="dialog-close" @click="close"></div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#aui-footer",
		data: {
			dialog_show: false,
			sign_list: '',
			check_sign: ''
		},
		methods: {
			close: function() {
				vm.dialog_show = false;
			},
			sign: function() {
				console.log($api.getStorage('token'))
				get_data('api/MemberSign/sign', {
					token: $api.getStorage('token'),
				}, function(ret) {

					// alert(JSON.stringify(ret,null,2))
					if (ret.status == 1) {
						vm.dialog_show = true;
						vm.check_sign = ret.data;
						// alert(JSON.stringify(vm.check_sign))
						sign_list.days = ret.data.days

						// vm.sel_price = ret.data[0]
					} else {
						toast(ret.msg)
					}
				})
			},
			get_list: function() {
				get_data('api/MemberSign/index', {
					token: $api.getStorage('token'),
				}, function(ret) {
					// alert(JSON.stringify(ret.data),null,2)
					if (ret.status == 1) {
						vm.sign_list = ret.data
							// vm.sel_price = ret.data[0]
					}
				})
			}
		}
	})

	apiready = function() {
		$api.fixStatusBar($api.byId('aui-header'))
		vm.get_list()
	};


</script>

<script type="text/javascript">
	// 签到
	$('#sign').click(function() {
			$('.dialog').fadeIn()
				// 以下为模拟签到，具体应该根据后端返回的数据来处理逻辑
			var index = $('.sign-info .num span.active').length;
			console.log(index)
			if (index == 7) {
				alert("恭喜您，成功签到一周");
				return
			}
			$('.sign-info .num span.active').eq(index - 1).removeClass('now')
			$('.sign-info .num span').eq(index).addClass('active now')
			$('.sign-info .num').addClass('sign' + (index + 1))
		})
		// 关闭弹窗
	$('.dialog-close,.dialog .mask').click(function() {
		$('.dialog').fadeOut()
	})
</script>
